<template>
  <div class="news-detail-main">
    <div class="select-sector">
      <div class="select-label">请选择编辑器：</div>
      <el-radio v-model="newsData.type" label="0">富文本编辑器</el-radio>
      <el-radio v-model="newsData.type" label="1">markdown 编辑器</el-radio>
      <el-button type="primary" @click="insertImg">插入图片</el-button>
    </div>
    <Tinymce v-if="newsData.type === '0'" ref="mce" v-model="newsData.content1" height="400px" />
    <MarkdownEditor v-else ref="md" v-model="newsData.content2" class="markdown-editor" height="500px" />
    <el-card style="margin-top:">
      <div slot="header">
        <span>新闻信息</span>
      </div>
      <el-form ref="form" :model="newsData" label-width="100px">
        <el-form-item label="标题">
          <el-input v-model="newsData.title" />
        </el-form-item>
        <el-form-item label="作者">
          <el-input v-model="newsData.author" />
        </el-form-item>
        <el-form-item label="概要">
          <el-input v-model="newsData.desc" class="text-area" type="textarea" />
        </el-form-item>
        <el-form-item label="是否热门">
          <el-radio v-model="newsData.hot" label="0">否</el-radio>
          <el-radio v-model="newsData.hot" label="1">是</el-radio>
        </el-form-item>
        <el-form-item label="封面">
          <el-input v-model="newsData.cover" />
        </el-form-item>
        <el-form-item>
          <el-button style="margin-left: 50px" type="primary" @click="doPost">提 交</el-button>
          <el-button style="margin-left: 50px" @click="cancel">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-dialog
      title="插入图片"
      :visible.sync="isVisiable"
      width="80%"
      :before-close="handleClose"
    >
      <div class="main">
        <h3>Materials Manage</h3>
        <el-card class="search-upload">
          <div slot="header">
            <span>Upload / Search</span>
          </div>
          <el-row>
            <el-col :span="9">
              <div class="upload">
                <el-input v-model="materialTitle" placeholder="请先填写素材名称" />
                <el-upload
                  class="upload-demo"
                  :action="url"
                  :show-file-list="false"
                  :on-success="updateTitle"
                  :before-upload="checkTitle"
                  style="margin-top: 5px; margin-left: 40px"
                >
                  <el-button size="small" type="primary">选择素材上传</el-button>
                </el-upload>
              </div>
            </el-col>
            <el-col :span="3" :offset="3">
              <div class="search-label">素材名称: </div>
            </el-col>
            <el-col :span="4">
              <el-input v-model="materialSearch" style="width: 200px" />
            </el-col>
            <el-col :span="2" :offset="3">
              <el-button type="primary" @click="search">查找</el-button>
            </el-col>
          </el-row>
        </el-card>
        <el-card>
          <div slot="header">
            <span>素材管理</span>
          </div>
          <div class="materials">
            <el-row type="flex" :gutter="20" class="flex-warp">
              <el-checkbox-group v-model="checkList">
                <el-col v-for="item in materials" :key="item.id" :span="6">
                  <el-card class="materials-card">
                    <img class="materials-img" :src="'http://www.bufantec.com/media/' + item.fileName">
                    <div class="material-bottom">
                      <div class="material-title">Title: {{ item.title }}</div>
                      <div class="material_del">
                        <el-checkbox :label="item.fileName">导入图片</el-checkbox>
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-checkbox-group>
            </el-row>
          </div>
          <el-pagination
            style="text-align: center"
            :current-page="page.current"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="page.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-card>
      </div>
      <span slot="footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="addImg">确 定</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
import Tinymce from '@/components/Tinymce/index.vue'
import MarkdownEditor from '@/components/MarkdownEditor/index.vue'
import { getNewsDetail, saveNews, updateNews } from '@/api/news/news'
import Materials from './Materials'
export default {
  components: {
    Tinymce,
    MarkdownEditor
  },
  mixins: [Materials],
  data() {
    return {
      newsData: {
        title: '',
        author: '',
        desc: '',
        hot: '',
        cover: ''
      },
      checkList: [],
      isVisiable: false,
      tinymceContent: '',
      markdownContent: ''
    }
  },
  created() {
    if (this.$route.params.id !== undefined) {
      getNewsDetail({
        id: this.$route.params.id
      }).then(resp => {
        this.newsData = resp.data
      })
    }
  },
  methods: {
    insertImg() {
      this.isVisiable = !this.isVisiable
    },
    handleClose() {
      this.checkList = []
      this.isVisiable = !this.isVisiable
    },
    addImg(fileName) {
      const baseUrl = 'http://www.bufantec.com/media/'
      let editorRef = null
      // type === 0 => 类型为富文本编辑器
      if (this.newsData.type === '0') {
        editorRef = this.$refs.mce
      } else {
        editorRef = this.$refs.md
      }

      for (const value of this.checkList) {
        editorRef.doInsert(baseUrl + value)
      }

      this.isVisiable = !this.isVisiable
      this.checkList = []
    },
    doPost() {
      let api = null
      if (this.$route.params.id !== undefined) {
        api = updateNews
      } else {
        api = saveNews
      }

      if (this.newsData.type === '1') {
        this.newsData.content1 = this.$refs.md.getHtml()
      }

      api({
        xyNews: {
          ...this.newsData
        }
      }).then(res => {
        if (res.code === 'success') {
          this.$message.success('提交成功')
          this.$router.push({ name: 'news' })
        }
      })
    },
    cancel() {
      this.$router.push({ name: 'news' })
    }
  }

}
</script>

<style lang="scss" scoped>
  .select-sector {
    height: 40px;
    display: flex;
    align-items: center;
    margin-left: 30px;

    .el-radio {
      margin-top: 3px;
    }
    .el-button {
      height: 70%;
      line-height: 40%;
    }
  }
  .el-input {
    width: 300px;
  }
  .text-area {
     width: 300px;
  }
  .main {
        margin: 0 auto;
      width: 90%;
    h3 {
      text-align: center;
      font-weight: normal;
    }
    .upload {
      display: flex;
    }
    .search-label {
      line-height: 40px;
      font-size: 16px;
    }
    .materials-img {
      width: 150px;
      height: 150px;
      text-align: center;
    }

    .materials-card{
      margin-bottom: 20px;;
    }

    .material-bottom {
      .material-title {
        height: 20px;
        line-height: 20px;
      }
      .el-checkbox {
        margin-top: 5px;
      }
    }
  }

  .flex-warp {
    flex-wrap: wrap;
  }
</style>
